<template>
  <scroll-view scroll-y="true" class="scroll-container">
    <!-- 1. 泉州风光（轮播图模块） -->
    <view class="module-title">泉州风光</view>
    <swiper indicator-dots="true" autoplay="true" interval="3000" duration="500">
      <swiper-item>
        <image src="/static/city1.png" mode="widthFix"></image>
      </swiper-item>
      <swiper-item>
        <image src="/static/city2.jpg" mode="widthFix"></image>
      </swiper-item>
      <swiper-item>
        <image src="/static/city3.jpg" mode="widthFix"></image>
      </swiper-item>
    </swiper>

    <!-- 2. 泉州介绍（城市介绍模块） -->
    <view class="module-title">泉州介绍</view>
    <view class="city-intro">
      <rich-text :nodes="cityIntro"></rich-text>
    </view>

    <!-- 3. 探索进度 -->
    <view class="progress">
      <text>当前探索进度：{{ progress }}%</text>
      <progress :percent="progress" show-info="true" />
    </view>

    <!-- 4. 城市选择 -->
    <view class="city-picker">
      <picker mode="region" @change="onRegionChange">
        <view class="picker-text">
          当前选择：{{ region[0] }} - {{ region[1] }} - {{ region[2] }}
        </view>
      </picker>
    </view>

    <!-- 5. 偏好设置 -->
    <view class="preference">
      <view class="travel-mode">
        <text>出行方式：</text>
        <radio-group @change="onTravelModeChange">
          <radio :value="'bus'" :checked="travelMode === 'bus'">公交</radio>
          <radio :value="'drive'" :checked="travelMode === 'drive'">自驾</radio>
          <radio :value="'walk'" :checked="travelMode === 'walk'">步行</radio>
        </radio-group>
      </view>
      <view class="recommend-spots">
        <text>显示推荐景点：</text>
        <switch :checked="showRecommendSpots" @change="onShowRecommendSpotsChange"></switch>
      </view>
      <view class="explore-radius">
        <text>探索半径：{{ radius }}km</text>
        <slider min="1" max="20" :value="radius" @change="onRadiusChange"></slider>
      </view>
    </view>

    <!-- 6. 泉州宣传（视频模块，已适配 city-video.mp4） -->
    <view class="module-title">泉州宣传</view>
    <view class="media-video">
      <video :src="videoUrl" controls poster="/static/city1.jpg"></video>
    </view>

    <!-- 7. 泉州的背景音乐（音频模块） -->
    <view class="module-title">泉州的背景音乐</view>
    <view class="media-audio">
      <text>泉州南音 - 泉州传统乐团</text>
      <button type="primary" @click="playAudio">播放</button>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      cityIntro: '<h3>海上丝绸之路起点 - 泉州</h3><p>历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p><p>著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p><p>特色文化：拥有<em style="color: blue;">南音</em>、<em style="color: blue;">木偶戏</em>和闽南建筑等丰富的非物质文化遗产。</p>',
      progress: 60,
      region: ['福建省', '泉州市', '丰泽区'],
      travelMode: 'bus',
      showRecommendSpots: true,
      radius: 10,
      // 关键适配：视频路径已改为 /static/city-video.mp4
      videoUrl: '/static/city-video.mp4',
      audioContext: null
    };
  },
  onReady() {
    // 初始化音频上下文
    this.audioContext = uni.createInnerAudioContext();
    this.audioContext.src = '/static/city-music.mp3';
    // 音频播放错误监听（便于排查问题）
    this.audioContext.onError(err => {
      uni.showToast({ title: '音频加载失败', icon: 'none' });
      console.log('音频错误信息：', err);
    });
  },
  methods: {
    onRegionChange(e) {
      this.region = e.detail.value;
    },
    onTravelModeChange(e) {
      this.travelMode = e.detail.value;
    },
    onShowRecommendSpotsChange(e) {
      this.showRecommendSpots = e.detail.value;
    },
    onRadiusChange(e) {
      this.radius = e.detail.value;
    },
    playAudio() {
      // 播放前先停止当前播放（避免重复播放）
      this.audioContext.stop();
      this.audioContext.play().catch(err => {
        uni.showToast({ title: '音频播放失败', icon: 'none' });
      });
    }
  }
};
</script>

<style scoped>
.scroll-container {
  height: 100vh;
  background-color: #fafafa;
}

/* 四个模块标题样式 */
.module-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #2c3e50;
  padding: 25rpx 20rpx;
  border-bottom: 2rpx solid #ecf0f1;
  margin-top: 10rpx;
  background-color: #fff;
}
/* 轮播图样式 */
swiper {
  height: 300rpx;
  background-color: #fff;
}
swiper image {
  width: 100%;
  height: 100%;
}

/* 城市介绍样式 */
.city-intro {
  padding: 20rpx;
  line-height: 40rpx;
  background-color: #fff;
  margin-top: 10rpx;
}

/* 探索进度样式 */
.progress {
  padding: 20rpx;
  background-color: #fff;
  margin-top: 10rpx;
}

/* 城市选择样式 */
.city-picker {
  padding: 20rpx;
  background-color: #fff;
  margin-top: 10rpx;
}
.picker-text {
  font-size: 28rpx;
  color: #666;
}

/* 偏好设置样式 */
.preference {
  padding: 20rpx;
  background-color: #fff;
  margin-top: 10rpx;
}
.travel-mode, .recommend-spots, .explore-radius {
  margin-bottom: 20rpx;
  font-size: 28rpx;
}

/* 泉州宣传（视频）样式 */
.media-video {
  padding: 20rpx;
  background-color: #fff;
  margin-top: 10rpx;
}
.media-video video {
  width: 100%;
  height: 400rpx;
  border-radius: 10rpx;
}

/* 泉州的背景音乐（音频）样式 */
.media-audio {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15rpx;
  font-size: 28rpx;
  background-color: #fff;
  margin-top: 10rpx;
}
.media-audio button {
  width: 200rpx;
}
</style>
